<template>
  <div>
    <h2>我的待办任务</h2>
    <div style="margin-bottom:12px;">当前用户: <strong>{{ currentUserId || '未设置' }}</strong>
      <a-button size="small" style="margin-left:8px" @click="load" :disabled="!currentUserId">刷新</a-button>
    </div>
    <a-table :dataSource="tasks" :loading="loading" rowKey="id" size="small">
      <a-table-column title="ID" dataIndex="id" key="id" />
      <a-table-column title="名称" dataIndex="name" key="name" />
      <a-table-column title="流程定义" dataIndex="processDefinitionId" key="processDefinitionId" />
      <a-table-column title="创建时间" dataIndex="createTime" key="createTime" />
      <a-table-column title="操作" key="actions">
        <template #default="{ record }">
          <a-space size="small">
            <a-button size="small" type="primary" @click="openApproval(record)">审批</a-button>
            <a-button size="small" @click="quickApprove(record, 'approved')">通过</a-button>
            <a-button size="small" danger @click="quickApprove(record, 'rejected')">驳回</a-button>
          </a-space>
        </template>
      </a-table-column>
    </a-table>

    <a-modal v-model:visible="approvalModalVisible" title="审批任务" @ok="submitApproval" @cancel="closeApproval">
      <div v-if="selectedTask">
        <div style="margin-bottom:8px;">任务: <strong>{{ selectedTask.name }}</strong> (ID: {{ selectedTask.id }})</div>
        <a-radio-group v-model:value="approvalResult" style="margin-bottom:12px;">
          <a-radio value="approved">通过</a-radio>
          <a-radio value="rejected">驳回</a-radio>
        </a-radio-group>
        <a-textarea v-model:value="approvalComment" rows="4" placeholder="填写审批意见（可选）" />
      </div>
    </a-modal>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { currentUserId } from '../store/user';
import axios from 'axios';

interface Task { id:string; name:string; processDefinitionId:string; createTime:string; processInstanceId?: string; }
const tasks = ref<Task[]>([]);
const loading = ref(false);
const approvalModalVisible = ref(false);
const selectedTask = ref<Task | null>(null);
const approvalResult = ref<'approved'|'rejected'>('approved');
const approvalComment = ref('');

async function load() {
  if(!currentUserId.value) return;
  loading.value = true;
  try {
    const resp = await axios.get('/api/tasks/pending', { params: { assignee: currentUserId.value }});
    tasks.value = resp.data.data || resp.data || [];
  } finally { loading.value = false; }
}

function openApproval(task: Task) {
  selectedTask.value = task;
  approvalResult.value = 'approved';
  approvalComment.value = '';
  approvalModalVisible.value = true;
}

function closeApproval() {
  approvalModalVisible.value = false;
  selectedTask.value = null;
}

async function submitApproval() {
  if (!selectedTask.value) return;
  await axios.post(`/api/tasks/${selectedTask.value.id}/approve`, {
    approvalResult: approvalResult.value,
    approvalComment: approvalComment.value
  });
  closeApproval();
  load();
}

async function quickApprove(task: Task, result: 'approved'|'rejected') {
  await axios.post(`/api/tasks/${task.id}/approve`, {
    approvalResult: result,
    approvalComment: ''
  });
  load();
}


</script>